<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <title>更换银行卡</title>
    <link rel="stylesheet" href="../../styles/h5/reset.min.css"/>
    <link rel="stylesheet" href="../../styles/h5/errortankuang.css"/>
    <!--以上为公共css样式-->
    <link rel="stylesheet" href="../../styles/h5/index.css"/>

    <script charset="utf-8" type="text/javascript" src="../../scripts/h5/jquery-1.9.1.min.js"></script>
    <script charset="utf-8" type="text/javascript" src="../../scripts/h5/jquery.modal.js"></script>
    <!--以上为公共js文件-->
</head>
<body>
<div class="zz-top"></div>
<div class="zz-list">
    <ul>
        <li class="zz-position">
            <span class="zz-left">收款人姓名</span
            ><input class="zz-code-num zz-payee-name" type="text" placeholder="请输入收款人姓名" maxlength="20"/>
            <i class="zz-delete-icon" style="display: none"></i>
        </li>
        <li class="zz-position">
            <span class="zz-left">身份证号</span
            ><input class="zz-code-num zz-id-num" type="text" placeholder="请输入身份证号" maxlength="18"/>
            <i class="zz-delete-icon" style="display: none"></i>
        </li>
        <li class="zz-position">
            <span class="zz-left">手机号</span
            ><input class="zz-code-num zz-phone-code" type="tel" placeholder="收款人手机号" maxlength="11"/>
            <input type="button" class="zz-code" value="获取验证码"/>
        </li>
        <li>
            <span class="zz-left">验证码</span
            ><input class="zz-code-num  zz-verification-code" type="tel" placeholder="请输入验证码" maxlength="6"/>
        </li>
    </ul>
</div>
<input class="footer zz-footTop" type="button" value="下一步">
</body>

<script charset="utf-8" type="text/javascript" src="../../scripts/h5/utils.js"></script>
<script charset="utf-8" type="text/javascript" src="../../scripts/h5/index.js"></script>
<script charset="utf-8" type="text/javascript">

    //点击获取验证码 先判断手机格式对不对
    $code.click(function () {
        var that = $(this);
        //判断手机号
        if (!utils.effectivePhone($phone_code.val(), that)) {
            return false
        }
        var bankMobileId = utils.removeSpace($phone_code.val());
        $.ajax({
            url: utils.ajaxUrl()+"h5/settlementController/send",
            async: false,
            data: {
				bankMobileId: bankMobileId
            },
            type: 'get',
            success: function (res) {
            	var res = JSON.parse(res);
            	//console.log(res);
                if (res && res.retCode == '0000') {
                	//alert(res.verifyCode);
                    utils.effectivePhone($phone_code.val(), that, utils.time, that)
                }else{
                    new $.modal({
                        content: res.retMsg,//弹框内容
                        showcontent: true,//false为弹出框组件二，true为弹出框组件一

                    }).show(that);
                   
                }
            }
        });
    });

    function deleteInp(ele, name) {
        if (ele == "") {
            name.hide()
        } else {
            name.show();
        }
    }
    //监听input框变化，加×
    $payee_name.change(function () {
        var $this = $(this);
        deleteInp($this.val(), $this.siblings(".zz-delete-icon"));
    });

    $id_num.change(function () {
        var $this = $(this);
        deleteInp($this.val(), $this.siblings(".zz-delete-icon"));
    });
    //点击×清空输入框
    $delete_icon.click(function () {
        var $this = $(this);
        $this.siblings(".zz-code-num").val("");
        $this.hide();
    });

    $footer.click(function () {
        //判断姓名 英文长度不能超过10，中文长度不能超过5
        if (!utils.effectiveName($payee_name.val(), $footer)) {
            return false
        }
        //正则判断身份证
        if (!utils.effectiveId($id_num.val(), $footer)) {
            return false
        }
        //判断手机号
        if (!utils.effectivePhone($phone_code.val(), $footer)) {
            return false
        }

        //判断验证码
        if (!utils.effectiveNum($verification_code.val(), $footer)) {
            return false
        }

        var colAccName = $payee_name.val();
        var id_num = $id_num.val();
        var phone = utils.removeSpace($phone_code.val());
        var verification = $verification_code.val();
		var change = "changeCard";
		
		new $.modal({
            content: "加载中",
            animation: true//调用动画
        }).show();
		
		//$footer.attr("disabled", "true");
        $.ajax({
            url: utils.ajaxUrl()+"h5/settlementController/changeCard",
            data: {
            	colAccName: colAccName,
                payeeInidcard: id_num,
                bankMobileId: phone,
                code: verification
            },
            async: false,
            type: 'get',
            success: function (res) {
            	var res = JSON.parse(res);
            	//console.log(res);
                if (res && res.retCode == "0000") {
                	
                    window.location.href = "../../html/h5/addBankCard.html?change=" + change;
                    //$footer.removeAttr("disabled");
                    new $.modal({
            			animation: true,//调用动画
        			}).hide();
                }else{
                	new $.modal({
            			animation: true,//调用动画
        			}).hide(0);
                    new $.modal({
                        content: res.retMsg,//弹框内容
                        showcontent: true,//false为弹出框组件二，true为弹出框组件一
                    }).show($footer);
                }
            }
        });


    })

</script>
</html>